آموزش بوت‌کمپ جامع ری‌اکت نیتیو (React Native) ۲۰۲۶ [ویدئویی] - آخرین آپدیت

سرفصل ها و درس ها

ری‌اکت نیتیو | شروع به کار React Native | Getting Started

• مقدمه Introduction

• پیش‌نیازهای دوره Course Prerequisites

• ری‌اکت نیتیو چیست؟ What Is React Native

• آشنایی با Expo Snack Introduction to Expo Snack

• راه اندازی محیط توسعه Set Up Environment

• ساخت اولین اپلیکیشن Create Your First App

• شبیه‌ساز iOS (MacOS) iOS Simulator (MacOS)

• اجرای اپلیکیشن روی دستگاه واقعی Run App on Real Device

• شبیه‌ساز اندروید (MacOS) Android Emulator (MacOS)

• راه اندازی محیط توسعه در ویندوز Setup Environment Windows

رابط کاربری (UI) و کامپوننت‌های اصلی UI & Core Components

• توضیح کدهای ابتدایی Explain Init Code

• استفاده از SafeAreaView SafeAreaView

• کار با Text Text

• استفاده از StyleSheet StyleSheet

• کار با تصاویر Images

• دکمه‌ها، Pressable و Touchable Buttons & Pressable & Touchable

• استفاده از ScrollView ScrollView

• استفاده از Platform Platform

• لودرها (Loaders) Loaders

• استفاده از Viewها Views

• حاشیه‌ها (Margin & Padding) Margin & Padding

• مفهوم Flex Flex

• جهت‌دهی Flex (flex direction) flex-direction

• استفاده از flexWrap flexWrap

• موقعیت‌ها (Positions) Positions

• ابعاد (Dimensions) Dimensions

• رابط کاربری واکنش‌گرا (Responsive UI) Responsive UI

• هوک useState useState Hook

• استفاده از Modal Modal

• آیکون‌های Expo Expo Icons

• استفاده از ImageBackground ImageBackground

• ورودی متنی (TextInput) TextInput

• ساخت کامپوننت ری‌اکت Create React Component

تمرین تسلط بر UI UI Mastering Practice

• مقدمه تسلط بر UI UI Mastering Introduction

• طراحی در Figma Figma Design

• مقایسه PNG و SVG PNG vs SVG

• صفحه معرفی (Intro Screen) Intro Screen

• آواتار کاربر User Avatar

• کامپوننت هدر (Header) Header Component

• بخش شبکه‌های اجتماعی Social Section

• کانتینر شبکه‌های اجتماعی Social Container

• تکمیل صفحه تماس با ما Finish Contact Us Screen

• هدر صفحه اصلی Home Screen Header

• تب‌های بالایی (Top Tabs) Top Tabs

• کامپوننت کارت با لایه تیره Card Component with Dark Overlay

• استفاده از FlatList با ۲ ردیف FlatList with 2 Rows

• استفاده از FlatList با Props FlatList with Props

• هدر صفحه پرداخت Payment Screen Header

• روش پرداخت Payment Method

• انتخاب روش پرداخت Payment Method Selected

• لیست پرداخت‌ها Payment List

• باکس کارت بانکی Bank Card Box

• ساخت دکمه افزودن Add Button

• افزودن انیمیشن‌ها Adding Animations

• زمان تمرین و پروژه Task Time

ناوبری و تب‌های پایین (Bottom Tabs) Navigation & Bottom Tabs

• ساخت صفحات Builds Screens

• ناوبری استکی (Stack Navigation) Stack Navigation

• مرور کلی و تنظیمات صفحات Recap & Screen Options

• استفاده از useRoute useRoute

• تب‌های پایین (BottomTabs) BottomTabs

کار با APIها Working with APIs

• ساخت اپلیکیشن جدید Create New App

• ساخت API سفارشی (Mock API) Create Custom API (Mock API)

• آشنایی با Axios Axios

• درخواست Get و FlatList Get Request & FlatList

• درخواست Get بر اساس ID Get By Id Request

• مدیریت خطا با Try Catch Try Catch

• درخواست Delete Delete Request

• درخواست Post Post Request

• درخواست Put Put Request

• بازنویسی کد و ساخت صفحه اصلی پروژه جدید Refactor and Create Home Screen for New Project

• کارت کتاب Book Card

• کار با Props Props

• توابع API APIs Functions

• رندر داده‌ها در FlatList Render Data in FlatList

• حذف کتاب Delete Book

• رابط کاربری دکمه افزودن و Modal Add Button UI & Modal

• ورودی متنی سفارشی (CustomTextInput) CustomTextInput

• دکمه ذخیره Save Button

• ساخت کتاب Create Book

• ویرایش کتاب Edit Book

• رفع باگ‌ها Bug Fix

رداکس و Redux Toolkit Redux & Redux Toolkit

• رداکس آنقدرها سخت نیست Redux is not that hard

• چرا رداکس مفید است؟ Why Redux is Useful

• توضیح Reducer Reducer Explained

• ساخت Store و دریافت داده از وضعیت جهانی Create Store and Get Data From Global State

• اکشن‌ها و useDispatch Actions & useDispatch

• مفهوم Payload Payload

• ترکیب ردیوسرها (Combine Reducers) Combine Reducers

• وضعیت ریشه (RootState) RootState

• مرور رداکس و تمرین Recap Redux & Task

• استفاده از Redux Toolkit Store Redux Toolkit Store

• ردیوسرها و اکشن‌ها در Redux Toolkit Redux Toolkit Reducer & Actions

طراحی UI اپلیکیشن فروشگاه هوشمند Smart E-Commerce App UI

• ساخت پروژه Create Project

• ساختار پوشه‌بندی Folder Structure

• ساخت AppText AppText

• رنگ‌های اپلیکیشن App Colors

• ساخت AppSafeView AppSafeView

• پیام‌های اطلاع‌رسانی (Flash Message) Flash Message

• ساخت AppButton AppButton

• ساخت AppTextInput AppTextInput

• صفحه ورود (Sign In) Sign In Screen

• صفحه ثبت‌نام (Sign Up) Sign Up Screen

• ناوبری استکی (Stack Navigation) Stack Navigation

• تب‌های پایین و استک اصلی اپلیکیشن Bottom Tabs & Main App Stack

• استایل‌دهی به تب‌های پایین Style Bottom Tabs

• هدر اپلیکیشن App Header

• فونت‌های سفارشی اپلیکیشن App Custom Fonts

• آماده‌سازی داده‌ها Prepare Data

• کارت محصول Product Card

• دکمه افزودن به سبد خرید Add to Cart Button

• افزودن سایه (Shadow) Shadow

• کار با Props Props

• رندر داده‌ها در FlatList Render Data in FlatList

• کامپوننت سبد خرید خالی Empty Cart Component

• آیتم‌های سبد خرید Cart Item

• دکمه‌های افزایش و کاهش تعداد Increase/Decrease Buttons

• پراپ‌های آیتم سبد خرید Cart Item Props

• نمایش مجموع قیمت‌ها Totals View

• صفحه سبد خرید Cart Screen

• صفحه پرداخت (Checkout) Checkout Screen

• صفحه پروفایل Profile Screen

• صفحه سفارشات من My Orders Screen

مدیریت وضعیت سبد خرید (Redux Toolkit) Cart State Management (Redux Toolkit)

• ساخت Store Create Store

• ساخت cartSlice cartSlice

• افزودن آیتم به سبد خرید Add Item to Cart

• حذف آیتم از سبد خرید Remove Item from Cart

• حذف محصول Delete Product

• تکمیل صفحه سبد خرید Finish Cart Screen

مدیریت فرم‌ها و اعتبارسنجی ورودی‌ها Forms Handling & Input Validation

• مدیریت فرم‌ها با useState Handling Forms Using useState

• کنترل‌کننده AppTextInput AppTextInputController

• استایل‌دهی به پیام خطا Style Error Message

• استفاده از Yup و طرح‌های اعتبارسنجی Yup & Validation Schemas

• افزودن TypeScript Add TypeScript

• تمرین اعتبارسنجی احراز هویت Auth Validation Task

احراز هویت و دیتابیس Firebase Authentication & Firebase Database

• راه‌اندازی Firebase Firebase Init

• ورود کاربران Sign in Users

• مدیریت خطاها Handling Errors

• ثبت‌نام کاربران جدید Register New Users

• دیتابیس Firestore Firestore Database

• دریافت داده‌ها از دیتابیس Get Data from Database

• ذخیره داده‌های کاربر در وضعیت جهانی Save User Data in Global State

• ثبت سفارشات Place Orders

• رفع اخطارهای رداکس و سفارشات تکراری Fix Redux Warning & Duplicate Orders

• دریافت سفارشات کاربر Get Users Order

• مدیریت تاریخ سفارشات Handling Orders Date

بومی‌سازی (Localization) Localization

• مقدمه بومی‌سازی (Localization) Localization Introduction

• ساخت Bottom Sheet How to Create Bottom Sheet

• ساخت Radio Button How to Create Radio Button

• پیکربندی بومی‌سازی Setup Localization

• دریافت ترجمه Get Translation

• افزودن ترجمه انگلیسی Adding English Translation

• تکمیل تمامی فایل‌های ترجمه Finish All Translation Files

• مدیریت تغییر زبان Handle Change Lang

ذخیره‌سازی محلی (Local Storage) Local Storage

• آشنایی با Async Storage Introduction to Async Storage

• ذخیره داده‌ها در حافظه محلی Save Data in Local Storage

• دریافت داده‌ها از حافظه محلی Get Data from Local Storage

• پاکسازی داده‌ها Clear Data

• ذخیره وضعیت ورود کاربر در حافظه محلی Save Logged in State in Local Storage

• خروج از حساب و بارگذاری وضعیت احراز هویت Logout & Auth State Loading

• صفحه بارگذاری اپلیکیشن (App Loading) App Loading

• تغییر وضعیت احراز هویت در Firebase Firebase Change Auth State

• رویکرد بهتر برای احراز هویت Better Auth Approach

• ذخیره زبان کاربر در حافظه محلی Saving User Language in Local Storage

• استفاده از Redux Persist Redux Persist

دیپلوی و انتشار Deployment

• تغییر آیکون و نام اپلیکیشن Change App Icon & Name

• ساخت Splash Screen App Splash Screen

• آشنایی با EAS EAS

• گرفتن خروجی APK Generate Build (APK)

• گرفتن خروجی AAB Generate Build (AAB)

آشنایی با React Native CLI Introduction to React Native CLI

• معرفی React Native CLI React Native CLI

• شباهت‌های Expo و CLI How Expo and CLI Share a Lot Together

• راه اندازی محیط توسعه MacOS MacOS Environment Setup

• راه اندازی محیط اندروید در مک Mac Android Environment Setup

• اجرای اپلیکیشن روی iOS و اندروید Run App on iOS & Android

• اجرای اپلیکیشن روی دستگاه اندروید واقعی Run App on Real Android Device

• اجرای اپلیکیشن روی آیفون واقعی Run App on Real iPhone Device

• آشنایی با Yarn Introduction to Yarn

فایربیس با React Native CLI Firebase with React Native CLI

• تغییر Bundle ID Change Bundle ID

• ادغام Firebase با اندروید Integrate Firebase with Android

• ادغام Firebase با iOS Integrate Firebase with iOS

• نوتیفیکیشن‌های Push در اندروید Push Notifications Android

• نوتیفیکیشن‌های Push در iOS Push Notifications iOS

• نوتیفیکیشن‌های Foreground Foreground Notifications

• ورود اجتماعی | ورود با گوگل در اندروید Social Login | Google Gmail Login with Android

• ورود اجتماعی | ورود با گوگل در iOS Social Login | Google Gmail Login with iOS

کدهای Native و ماژول‌های Native Native Code & Native Modules

• باز کردن گالری و دوربین برای انتخاب تصویر Open Gallery and Camera to Pick Images

• تغییر نام اپلیکیشن Change App Name

• تغییر آیکون اپلیکیشن در iOS Change App Icon iOS

• تغییر آیکون اپلیکیشن در اندروید Change App Icon Android

• اسپلش اسکرین اندروید Splash Screen Android

• اسپلش اسکرین iOS Splash Screen iOS

• ادغام Google Maps و Apple Maps در اپلیکیشن Integrate Google Maps & iOS Maps in React Native App

• نمایش گوگل مپ در اپلیکیشن Display Google Map in App

• افزودن Markerها به MapView Adding Markers to MapView

• استفاده از React Native Vector Icons React Native Vector Icons

• نحوه استفاده از SVGها در ری‌اکت نیتیو How to Use SVGs with React Native

اپلیکیشن چت AI | ساختار پوشه‌بندی AI Chat App | Folder Structure

• ساختارهای اولیه اپلیکیشن App Init Structures

• اسکریپت‌های کاربردی Useful Scripts

• ادغام با Reactotron Integrate with Reactotron

اپلیکیشن چت AI | رابط کاربری و ادغام AI Chat App | App UI & Integration

• هدر اپلیکیشن چت App Header

• کارت پیام‌های ارسالی Sent Message Card

• کارت پیام‌های دریافتی Response Message Card

• نمایش پیام‌ها در FlatList Put Messages in FlatList

• افزودن TypeScript Adding TypeScript

• ورودی چت (Chat Input) Chat Input

• استفاده از KeyboardAvoidingView KeyboardAvoidingView

• پراپ‌های ChatInput ChatInput Props

• ارسال پیام‌ها Send Messages

• دریافت پیام‌ها Receive Messages

• افزودن افکت در حال تایپ Adding Typing Effect

• صفحه چت خالی Empty Chat Screen

• اسکرول خودکار به پایین در FlatList Auto Scroll to Bottom in FlatList

• مدیریت وضعیت کیبورد Keyboard State

• ساخت Access Token در Hugging Face Create Hugging Face Access Token

• اتصال اپلیکیشن به Hugging (GPT 2) Connect App with Hugging (GPT-2)

• نمایش پاسخ Hugging Face (GPT 2) Display Hugging Face (GPT-2) Response

• ساخت کلید OpenAI Create OpenAI Key

• اتصال به OpenAI برای پاسخ‌های هوشمندتر Connect with OpenAI and Get Smarter Answers

• اصلاح Padding پایین ورودی Fix Input Padding Bottom

• افزودن Try Catch Adding Try-Catch

• افزودن حالت لودینگ «در حال تفکر» Adding Thinking Loading

• رفع مشکل افکت تایپ Fix Typing Effect Issue

• زمان تمرین و پروژه Task Time

انتشار با React Native CLI React Native CLI Deployment

• گرفتن خروجی APK و AAB برای اندروید Generate APK & AAB for Android

• آپدیت‌های OTA برای اندروید OTA Updates Android

• آپدیت‌های OTA برای iOS OTA Updates iOS

انیمیشن‌ها در ری‌اکت نیتیو Animations with React Native

• مقدمه بخش انیمیشن‌ها Animation Section Introduction

• حرکت دادن المان‌ها به صورت افقی Moving Elements Horizontally

• حرکت افقی تکرار شونده Moving Elements Horizontally Multiple Times

• حرکت دادن المان‌ها به صورت عمودی Move Elements Vertically

• تمرین ۱ Task Time - Task 1

• توالی انیمیشن‌ها (Animation Sequence) Animation Sequence

• انیمیشن محو شدن (Fade) Fade Animation

• تمرین ۲ Task Time - Task 2

• انیمیشن چرخش (Rotate) Rotate Animation

• تمرین ۳ Task Time - Task 3

• انیمیشن گسترش و کوچک شدن Expand & Shrink Animation

• تمرین ۴ Task Time - Task 4

• نحوه انیمیت کردن تغییرات رنگ How to Animate Color Changes

دوره سریع جاوااسکریپت (اختیاری) JavaScript Crash Course (Optional)

• لاگ‌گیری (Logging) Logging

• کامنت‌ها Comments

• انواع داده‌ها (Data Types) Data Types

• قوانین تعریف متغیرها Variables Rules

• تفاوت var, let, const var let const

• دستورات (Statements) Statements

• عملگرهای ریاضی Arithmetic Operators

• رشته‌ها (Strings) Strings

• تمپلیت‌های رشته‌ای String Templates

• متدهای رشته‌ها String Methods

• آبجکت‌ها (Objects) Objects

• آرایه‌ها (Arrays) Arrays

• مقادیر Boolean Boolean

• مقایسه‌ها Comparison

• عملگرهای منطقی Logical Operator

• ساختار if else if-else

• توابع (Functions) Functions